<template>
  <div>
    <Search @refresh='onRefresh' @search='onSearch' @deleteAll='deleteJobAll'>
      <el-button type="primary" :loading="false" @click="dialogVisible=true">添加兼职</el-button>
    </Search>

    <el-table :data="tableData" ref="qtable" border v-loading="loading">

      <el-table-column prop="title" label="兼职标题" align='center' />

      <el-table-column prop="cumulativeclick" label="累计点击" align='center' />
      <el-table-column prop="clicktoday" label="今日点击" align='center' />

      <el-table-column prop="cumulativeregistration" label="累计报名" align='center' />
      <el-table-column prop="signuptoday" label="今日报名" align='center' />

      <el-table-column label="创建时间" align='center'>
        <template #default="scope">
          {{time(scope.row.createTime)}}
        </template>
      </el-table-column>
      <el-table-column label="修改时间" align='center'>
        <template #default="scope">
          {{time(scope.row.updateTime)}}
        </template>
      </el-table-column>

      <el-table-column label="虚假职位" align='center'>
        <template #default="scope">
          {{scope.row.fake==1?'是':'否'}}
        </template>
      </el-table-column>

      <el-table-column label="展示类别" align='center'>
        <template #default="scope">
          {{scope.row.checkedCities.join("|")}}
        </template>
      </el-table-column>
      
      <el-table-column label="操作" align='center'>
        <template #default="scope">
          <div class="flix">
            <div class="button-b" v-if="scope.row.name!='admin'">
              <i class="el-icon-edit-outline"></i>
              <el-button type="text" @click="onClickUpdate(scope.row)">修改</el-button>
            </div>
            <div class="button" v-if="scope.row.name!='admin'">
              <i class="el-icon-delete"></i>
              <el-button type="text" @click="onClickDeleteUser(scope.row)">删除</el-button>
            </div>
          </div>
        </template>
      </el-table-column>

    </el-table>
    <!-- ============================================================================ -->
    <!-- ============================================================================ -->
    <div class="pagination">
      <el-pagination background layout="prev, pager, next" :total="total" :page-size='10' hide-on-single-page @current-change='onCurrentChange'>
      </el-pagination>
    </div>
    <!-- ============================================================================ -->
    <!-- ============================================================================ -->
    <el-dialog v-model="dialogVisible" width="75%" title="添加兼职" append-to-body destroy-on-close :close-on-click-modal='false'>
      <Addjob ref="addjob" @getUserList='getUserList' @dialog='dialog' />
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="onAddCompany" size='medium'>添加兼职</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="updatedialog" width="75%" title="修改兼职" append-to-body destroy-on-close :close-on-click-modal='false'>
      <Updatejob ref="updatejob" @getUserList='onRefresh' @dialog='dialog' :rowjob='rowjob' />
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="onUpdatejob" size='medium'>修改兼职</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script lang='ts'>
import { reactive, ref, toRefs } from "vue";
import { Get, Post } from "@/api";
import Search from "@/components/search/Search.vue";
import { $message, time } from "@/components/element";
import Addjob from "@/components/job/addjob.vue";
import Updatejob from "@/components/job/updatejob.vue";
export default {
  name: " ",
  components: { Search, Addjob, Updatejob },
  setup() {
    const data = reactive({
      tableData: [],
      total: 0,
      loading: false,
      dialogVisible: false,
      updatedialog: false,
      score: 5,
      userName: "",
      userPass: "",
    });

    /* 分页 */
    let pageNo: number = 1;
    const onCurrentChange = async (val: number) => {
      pageNo = val;
      await getUserList(val);
    };

    /* 查询 */
    const qtable = ref();
    const getUserList = async (pageNo = 1) => {
      try {
        data.loading = true;
        const userListResult = await Get({
          url: "getJob",
          data: {
            pageNo,
            pageSize: 10,
          },
        });
        data.tableData = userListResult.data.data;
        data.total = userListResult.data.total;
        qtable.value.doLayout();
        data.loading = false;
      } catch (error) {
        console.log(error);
        if (error.data) {
          $message("error", error.data.message);
        }
      }
    };
    getUserList();

    /* 删除 */
    const onClickDeleteUser = async (param: { _id: string }) => {
      try {
        const deleteResult = await Post({
          url: "deleteJob",
          data: {
            id: param._id,
          },
        });
        if (deleteResult.data.code == 200) {
          $message("success", deleteResult.data.message);
          onRefresh();
        }
      } catch (error) {
        console.log(error);
        if (error.data) {
          $message("error", error.data.message);
        }
      }
    };

    /* 修改数据 */
    const updatejob = ref();
    const rowjob = ref();
    const onClickUpdate = async (row: any) => {
      data.updatedialog = true;
      rowjob.value = row;
    };
    const onUpdatejob = async (row: any) => {
      updatejob.value.onclickyes();
    };

    // =======================================================================

    /* 刷新 */
    const onRefresh = async () => {
      await getUserList(pageNo);
    };

    /* 搜索 */
    const onSearch = async (valeu: string) => {
      try {
        data.loading = true;
        const userListResult = await Get({
          url: "searchjob",
          data: {
            name: valeu,
          },
        });
        data.tableData = userListResult.data.data;
        data.total = userListResult.data.total;
        qtable.value.doLayout();
        data.loading = false;
      } catch (error) {
        console.log(error);
        if (error.data) {
          $message("error", error.data.message);
        }
      }
    };

    /* 删除全部 */
    const deleteJobAll = async () => {
      try {
        const deleteResult = await Post({
          url: "deleteJobAll",
        });
        if (deleteResult.data.code == 200) {
          $message("success", deleteResult.data.message);
          onRefresh();
        }
      } catch (error) {
        console.log(error);
        if (error.data) {
          $message("error", error.data.message);
        }
      }
    };

    /* 添加 */
    const addjob = ref();
    const onAddCompany = async () => {
      addjob.value.onclickyes();
    };

    const dialog = () => {
      data.dialogVisible = false;
      data.updatedialog = false;
    };

    return {
      ...toRefs(data),
      onClickDeleteUser,
      onCurrentChange,
      onClickUpdate,
      deleteJobAll,
      onAddCompany,
      getUserList,
      onUpdatejob,
      onRefresh,
      onSearch,
      qtable,
      updatejob,
      addjob,
      rowjob,
      dialog,
      time,
    };
  },
};
</script>
<style lang="less" scoped>
.button,
.el-button--text {
  color: red;
}
.button:hover,
.el-button--text:hover {
  color: red;
}

.button-b {
  color: #409eff;
}
.button-b .el-button--text {
  color: #409eff;
}

.pagination {
  margin-top: 20px;
  display: flex;
  position: relative;
  .el-pagination {
    position: absolute;
    right: 0;
  }
}
.box-company {
  width: 60%;
  margin: 0 auto;
  .company {
    margin: 15px 0;
  }
}
.flix {
  display: flex;
  justify-content: space-around;
}
</style>